// 0. 获取页面上的元素
let form = document.querySelector("form"); // 获取表单元素
let errBox = document.querySelector(".error"); // 获取错误信息显示元素
let nameInp = document.querySelector("#username"); // 获取用户名输入框
let pwdInp = document.querySelector("#password"); // 获取密码输入框

// 为表单元素绑定提交事件
form.addEventListener("submit", async (e) => {
  e.preventDefault(); // 阻止表单的默认提交行为

  // 获取用户输入的用户名和密码
  let username = nameInp.value; // 获取用户名输入框的值
  let password = pwdInp.value; // 获取密码输入框的值

  // 校验用户名和密码是否为空
  if (!username || !password) return alert("请完整填写表单");

  // 使用用户名和密码请求登录接口
  let res = await http.post("/users/login", { username, password }); // 发起POST请求

  let data = res.data; // 获取响应数据
  // 校验登录是否成功
  if (data.code != 1) return alert("用户名或密码错误");

  // 将token和用户ID存储到本地存储中
  localStorage.setItem("token", data.token); // 存储token
  localStorage.setItem("id", data.user.id); // 存储用户ID

  // 跳转到主页并提示登录成功
  location.href = "./index.html"; // 跳转到主页
  alert("登录成功"); // 弹出登录成功提示
  console.log("跳转"); // 控制台输出“跳转”
});